<template>
  <section>
    <el-row style="margin: -3px 0px 0px 1px">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/system/dashboard' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色配置</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" style="float:left;margin: 18px 27px -3px">
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
        <el-form-item>
          <role-query @SearchByNameZh="listRoles" ref="searchBar"/>
        </el-form-item>
      </el-form>
    </el-col>
    <el-card style="margin: 18px 2%;width: 95%">
      <el-table
        :data="roles"
        stripe
        style="width: 100%"
        :max-height="tableHeight">
        <el-table-column prop="id" label="id" width="100"/>
        <el-table-column prop="name" label="角色名" fit/>
        <el-table-column prop="nameZh" label="角色描述" fit/>
<!--        <el-table-column label="状态" width="100">-->
<!--          <template slot-scope="scope">-->
<!--            <el-switch-->
<!--              v-model="scope.row.enable"-->
<!--              active-color="#13ce66"-->
<!--              inactive-color="#ff4949"-->
<!--              @change="(value) => commitStatusChange(value, scope.row)">-->
<!--            </el-switch>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editRole(scope.row)">
              编辑
            </el-button>
            <el-button type="text" size="small" @click="deleteRole(scope.row)">
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="24" class="toolbar">
        <el-col :span="24" class="toolbar">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 20]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-col>
      </el-col>
    </el-card>
    <edit-role ref="roleEditDialog" @reload="listRoles"/>
    <add-role ref="roleAddDialog" @reload="listRoles"/>
  </section>
</template>

<script>
import EditRole from "./rolecomponent/EditRole";
import AddRole from "./rolecomponent/AddRole";
import RoleQuery from "./rolecomponent/RoleQuery";

export default {
  name: 'Role',
  components: {RoleQuery, EditRole, AddRole},
  data() {
    return {
      dialogFormVisible: false,
      roles: [],
      perms: [],
      menus: [],
      props: {
        id: 'id',
        label: 'nameZh',
        children: 'children'
      },
      size: 5,
      total: 0,
      page: 1,
      nameZh: '',
      checked: []
    }
  },
  mounted() {
    this.listRoles()
    this.listMenus()
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 320
    }
  },
  methods: {
    listRoles() {
      var _this = this
      this.$axios.post('/role/listRole', {
        page: this.page,
        size: this.size,
        nameZh: this.$refs.searchBar.nameZh
      }).then(resp => {
        if (resp && resp.status === 200) {
          _this.roles = resp.data.result
          _this.total = resp.data.total
        }
      })
    },

    commitStatusChange(value, role) {
      if (role.id !== 1) {
        this.$confirm('是否更改角色状态？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.put('/role/changeStatue', {
            enable: value,
            id: role.id
          }).then(resp => {
            if (resp && resp.data.code === 200) {
              if (value) {
                this.$message('角色 [' + role.nameZh + '] 已启用')
              } else {
                this.$message('角色 [' + role.nameZh + '] 已禁用')
              }
            }
          })
        }).catch(() => {
          role.enable = !role.enable
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      } else {
        role.enable = true
        this.$alert('无法禁用系统管理员！')
      }
    },
    handleAdd(){
      this.$refs.roleAddDialog.dialogFormVisible=true
    },
    editRole(role) {
      this.$refs.roleEditDialog.editRole(role, this.menus)
      this.$refs.roleEditDialog.title = "角色修改"
    },
    deleteRole(role) {
      this.$confirm("确认不再使用此权限要删除吗?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
          this.$axios.post("/role/deleteBy", role).then(resp => {
            // this.$alert(resp.data.message)
            if (resp.data.code === 400) {
              this.$message({
                message: resp.data.message,
                type: "warning",
                duration: 5000
              })
            }
            if (resp.data.code === 200) {
              this.$message({
                message: resp.data.result,
                type: "success",
                duration: 3000
              })
              this.listRoles()
            }
          })
        }
      )
    },
    handleCurrentChange(v) {
      this.page = v
      this.listRoles()
    },
    handleSizeChange(val) {
      this.size = val
      this.listRoles()
    },
    /*==================================加载显示列表=====================================*/
    listMenus() {
      var _this = this
      this.$axios.get('/permission/menu/listMenus').then(resp => {
        if (resp && resp.data.code === 200) {
          _this.menus = resp.data.result
        }
      })
    }
    ,
  }
}
</script>

<style scoped>
.add-button {
  float: left;
  margin: 18px 0 18px 10px;
}
</style>
